import { Tree } from 'antd';
import type { DataNode } from 'antd/es/tree';
import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { getAllService } from '../../redux/category/categoryAction';


type Props = {
    setPid:any
    parentId:string
    Id:string
}

const ComCategoryTree = (props: Props) => {
    // const [treeData, setTreeData] = useState([])
    const state = useSelector((state: any) => state.cateData)
    const dispatch = useDispatch()
    const [expandedKeys, setExpandedKeys] = useState<React.Key[]>(['']);
    const [checkedKeys, setCheckedKeys] = useState<React.Key[]>(['']);
    const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
    const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);

    useEffect(() => {
        dispatch<any>(getAllService())
        // console.log('props.parentId',props.parentId);
        // console.log('props.Id',props.Id);
        setCheckedKeys([props.Id])
        setExpandedKeys([props.parentId])
    }, [props.parentId,props.Id])
  
    const onExpand = (expandedKeysValue: React.Key[]) => {
      console.log('onExpand', expandedKeysValue);
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      setExpandedKeys(expandedKeysValue);
      setAutoExpandParent(false);
    };
  
    const onCheck = (checkedKeysValue: any) => {
      console.log('onCheck', checkedKeysValue);
      setCheckedKeys(checkedKeysValue);
      props.setPid(checkedKeysValue.checked)
    };
  
    const onSelect = (selectedKeysValue: React.Key[], info: any) => {
      console.log('onSelect', info);
      setSelectedKeys(selectedKeysValue);
    };
    return (
        <div>
            <Tree
                checkable
                onExpand={onExpand}
                expandedKeys={expandedKeys}
                autoExpandParent={autoExpandParent}
                onCheck={onCheck}
                checkedKeys={checkedKeys}
                onSelect={onSelect}
                selectedKeys={selectedKeys}
                treeData={state}
                checkStrictly
                defaultCheckedKeys={[props.Id]}
            />
        </div>
    )
}

export default ComCategoryTree